<template>
  <div class="view-box">
    <p >{{title}}</p>
<!--    <RPIframe v-if="!isAll && initFinish" :src='gatherUrl'></RPIframe>-->
    <Tabs v-model="tabKey" class="tabs-app">
      <template #extra>
        <Tooltip width="600" placement="left-start">
            <Icon class="legend-icon" type="ios-help-circle-outline" v-show="tabKey == 'durations'"/>
            <template #content>
              <div class="legend-box" style="width: 160px">
                <p>工期图图例说明：</p>
                <div class="legend-item"><span>未启动：</span><div class="legend notStartClass"></div></div>
                <div class="legend-item"><span>正常进行：</span><div class="legend normalClass"></div></div>
                <div class="legend-item"><span>超额推进：</span><div class="legend exceedClass"></div></div>
                <div class="legend-item"><span>延期进行：</span><div class="legend postponeClass"></div></div>
                <div class="legend-item"><span>已完成：</span><div class="legend surpassClass"></div></div>
              </div>

            </template>
        </Tooltip>
      </template>

      <TabPane :label="isAll ? '总任务表' : '任务表'" name="totalTask" class="tab-pane">
        <RPIframe v-if="tabKey == 'totalTask' && initFinish && !isAll" :src='totalTaskUrl'></RPIframe>
        <RPIframe v-if="tabKey == 'totalTask' && initFinish && isAll" :src='gatherUrl'></RPIframe>
      </TabPane>
      <!-- <TabPane  label="工期图" name="duration" class="tab-pane">
        <RPIframe v-if="tabKey == 'duration' && initFinish" :src='durationUrl'></RPIframe>
      </TabPane> -->
      <TabPane  :label="isAll ? '总工期图' : '工期图'" name="durations" class="tab-pane">
        <DurationChart v-if="!isAll" :trgnodes='trgnode' :typeName='title' :isAll='isAll'/>
        <AllDurationChart v-else :trgnodes='trgnode' :typeName='title' :isAll='isAll' />
      </TabPane>
    </Tabs>
  </div>
</template>

<script>
import RPIframe from '@/components/common/RPIframe.vue'
import coverApi from '@/api/cover.js'
import DurationChart from './durationChart.vue'
import AllDurationChart from './allDurationChart.vue'
export default {
  name: 'viewReport',
  components: {
    RPIframe,
    DurationChart,
    AllDurationChart
  },
  props: {
    code: {
      type: String,
      default: ''
    },
    parentCode: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    trgnode: {
      type: String,
      default: ''
    },
    isAll: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tabKey: 'totalTask',
      initFinish: false,
      onlineSysDomain: '',
      totalTaskUrl: '',
      durationUrl: ''
    }
  },
  created: function () {
    this.init()
  },
  methods: {
    init() {
      coverApi.getCodeList('ONLINE_SYS_DOMAIN').then((res) => {
        let rescords = res.data.records
        if (rescords.length > 0) {
          this.onlineSysDomain = rescords[0].vsiDescription
          this._getUrl()
        }
      })
    },
    // 构建查看url
    _getUrl() {
      if (this.onlineSysDomain) {
        this.totalTaskUrl = `${this.onlineSysDomain}/be263b77c445cac9d49d55a8637e3603?trgnode=${this.trgnode}`
        this.durationUrl = `${this.onlineSysDomain}/b68f6fa7a48982737503ae9764533090?trgnode=${this.trgnode}`
        this.gatherUrl = `${this.onlineSysDomain}/a51c400b1dc9a58f759582f517f0d74b`
        this.initFinish = true
      }
    }
  }
}
</script>

<style lang="less" scoped>
.view-box {
  display: flex;
  flex-direction: column;
  height: 100%;
  p {
    padding: 10px;
    height: 40px;
    font-weight: bold;
    font-size: 16px;
  }
  .tabs-app {
    display: flex;
    flex: 1;
    flex-direction: column;
    /deep/.ivu-tabs-content  {
      flex: 1;
    }
  }
}
.legend-box {
  width: 200px;
  p {
    padding-left: 0
  }
}
.legend-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 22px;
  width: 130px
}
.legend {
  width: 48px;
  height: 16px;
}
.notStartClass {
   background-color: #EBEEF7;
}
.surpassClass {
  background-color: #3CDBC4;
}
.exceedClass {
  background-color: #4391FA;
}
.postponeClass {
    background-color: #7B89FF;
}
.normalClass {
   background-color: #3CDBC4;
}
.legend-icon {
  font-size: 24px;
  font-weight: 700;
}
.tabs-app {
  /deep/.ivu-tooltip {
    padding-top: 10px;
    margin-right: 10px;
  }
}

</style>

